<section [ngStyle]="tagData.cssStyle|styleFilter">

  <ng-container *ngFor="let item of tagData.data.data, let dataIndex = index">
    <div id="singleManageList{{dataIndex}}" class="information" [ngStyle]="item.outerBoxCssStyle|styleFilter">
      <!--日期分组-->
      <ng-container *ngIf="tagData.data.ifDateSort === true && item.date">
        <div class="dateSortDiv">
          <ng-container *ngIf="tagData.name==='groupByYearAndMonth'">
            <p class="date-sort"
              *ngIf="dataIndex == 0  || (dataIndex > 0 &&  item.date.substring(0,10) !== tagData.data.data[dataIndex-1].date.substring(0,10))">
              {{item.date | date:'yyyy年MM月'}}</p>
          </ng-container>
          <ng-container *ngIf="tagData.name!=='groupByYearAndMonth'">
            <p class="date-sort"
              *ngIf="dataIndex == 0  || (dataIndex > 0 &&  item.date.substring(0,10) !== tagData.data.data[dataIndex-1].date.substring(0,10))">
              {{item.date | date:'M月d日'}}</p>
          </ng-container>


        </div>
      </ng-container>
      <div class="informationMessage" [ngStyle]="item.innerBoxCssStyle|styleFilter">
        <div appDebounceClick (debounceClick)="go(item)" class="main-box">
          <ng-container *ngIf="item.img?.imgUrl">
            <img class="informationImg" *ngIf="item.img !== undefined" [src]="item.img?.imgUrl"
              onerror="this.src='assets/fw/icon_gold@3x.png'" [ngStyle]="item.img?.cssStyle|styleFilter"
              appDebounceClick (debounceClick)="previewImage(item.img?.imgUrl,1,item.imageIsPreView)">
          </ng-container>
          <ng-container *ngIf="!item.img?.imgUrl">
            <img class="informationImg" *ngIf="item.img !== undefined" [src]="item.img"
              onerror="this.src='assets/img/default_img.png'" appDebounceClick (debounceClick)="previewImage(item.img,1,item.imageIsPreView)">
          </ng-container>

          <div [ngClass]="{'noImageInformation': item.img === undefined}" class="informationRight"
            [ngStyle]="item.box?.cssStyle|styleFilter">
            <div class="firstClassBox">
              <p class="fristClass">
                <span class="fristClassTitle" *ngIf="item.title">{{item.title}}</span>
                <ng-container *ngFor="let tagItem of item.upTags">
                  <span class="title-tag" [ngStyle]="tagItem.cssStyle | styleFilter">{{tagItem.label}}</span>
                </ng-container>
              </p>
              <div class="singleRow">
                <div class="firstRowLeft" [ngStyle]="item.firstRowLeftBox?.cssStyle | styleFilter">
                  <span *ngIf="item.firstRowLeft&&item.firstRowLeft?.firstText"
                    [ngStyle]="item.firstRowLeft.firstText.cssStyle | styleFilter">{{item.firstRowLeft.firstText.label}}</span>
                  <span *ngIf="item.firstRowLeft&&item.firstRowLeft?.secondText"
                    [ngStyle]="item.firstRowLeft?.secondText?.cssStyle | styleFilter">{{item.firstRowLeft?.secondText?.label}}</span>
                  <span *ngIf="item.firstRowLeft&&item.firstRowLeft?.thirdText"
                    [ngStyle]="item.firstRowLeft.thirdText?.cssStyle | styleFilter">{{item.firstRowLeft?.thirdText?.label}}</span>
                  <span *ngIf="item.firstRowLeft&&item.firstRowLeft?.title"
                    class="firstRowTitle">{{item.firstRowLeft&&item.firstRowLeft?.title?.label}}</span>
                </div>
                <div class="firstRowRight">
                  <span *ngIf="item.firstRowRight&&item.firstRowRight.firstText"
                    [ngStyle]="item.firstRowRight.firstText.cssStyle | styleFilter">{{item.firstRowRight.firstText.label}}</span>
                  <img class="secondIcon" *ngIf="item.firstRowRight?.secondText?.label"
                    src="item.firstRowRight?.secondText?.label"
                    onerror="this.src='assets/icon/icon_help_notes@3x.png'" />
                </div>
              </div>
              <div class="normalRow" [ngClass]="{'justifyBetween': item.secondRowLeft&&item.secondRowRight}"
                *ngIf="item.secondRowLeft||item.secondRowRight">
                <div class="firstRowLeft">
                  <span *ngIf="item.secondRowLeft&&item.secondRowLeft?.firstText"
                    [ngStyle]="item.secondRowLeft.firstText.cssStyle | styleFilter">{{item.secondRowLeft.firstText.label}}</span>
                  <div *ngIf="item.secondRowLeft&&item.secondRowLeft?.secondText" class="sep-line"></div>
                  <span *ngIf="item.secondRowLeft&&item.secondRowLeft?.secondText"
                    [ngStyle]="item.secondRowLeft.secondText.cssStyle | styleFilter">
                    {{item.secondRowLeft.secondText.label}}</span>
                  <div *ngIf="item.secondRowLeft&&item.secondRowLeft?.thirdText" class="sep-line"></div>
                  <span *ngIf="item.secondRowLeft&&item.secondRowLeft?.thirdText"
                    [ngStyle]="item.secondRowLeft.thirdText.cssStyle | styleFilter">
                    {{item.secondRowLeft.thirdText.label}}</span>
                </div>
                <div class="firstRowRight" *ngIf="item.secondRowRight" appDebounceClick (debounceClick)="goPage(item.secondRowRight?.pngLink)"
                  [ngStyle]="item.secondRowRightBox?.cssStyle | styleFilter">
                  <span *ngIf="item.secondRowRight?.firstText?.label"
                    [ngStyle]="item.secondRowRight?.firstText?.cssStyle | styleFilter">
                    {{item.secondRowRight?.firstText?.label}}
                  </span>
                  <span *ngIf="item.secondRowRight?.secondText?.label"
                    [ngStyle]="item.secondRowRight?.secondText?.cssStyle | styleFilter">
                    {{item.secondRowRight?.secondText?.label}}
                  </span>
                  <span *ngIf="item.secondRowRight?.thirdText?.label"
                    [ngStyle]="item.secondRowRight?.thirdText?.cssStyle | styleFilter">
                    {{item.secondRowRight?.thirdText?.label}}
                  </span>
                  <img class="informationImg" *ngIf="item.secondRowRight?.img !== undefined"
                    [src]="item.secondRowRight?.img?.imgUrl" onerror="this.src='assets/fw/icon_gold@3x.png'"
                    [ngStyle]="item.secondRowRight?.img?.cssStyle|styleFilter">
                </div>
              </div>

              <div class="normalRow"
                [ngClass]="{'normalRow': item.thirdRowLeft&&!item.thirdRowRight,'singleRow':item.thirdRowLeft&&item.thirdRowRight}"
                *ngIf="item.thirdRowLeft||item.thirdRowRight">
                <div class="firstRowLeft" *ngIf="item.thirdRowLeft"
                  [ngStyle]="item.thirdRowLeftBox?.cssStyle | styleFilter">
                  <span *ngIf="item.thirdRowLeft&&item.thirdRowLeft?.firstText"
                    [ngStyle]="item.thirdRowLeft.firstText.cssStyle | styleFilter">{{item.thirdRowLeft.firstText.label}}</span>
                  <span *ngIf="item.thirdRowLeft&&item.thirdRowLeft?.secondText"
                    [ngStyle]="item.thirdRowLeft.secondText.cssStyle | styleFilter">{{item.thirdRowLeft.secondText.label}}</span>
                  <span *ngIf="item.thirdRowLeft&&item.thirdRowLeft?.thirdText"
                    [ngStyle]="item.thirdRowLeft.thirdText.cssStyle | styleFilter">{{item.thirdRowLeft.thirdText.label}}</span>
                </div>
                <div class="firstRowRight" *ngIf="item.thirdRowRight">
                  <span *ngIf="item.thirdRowRight&&item.thirdRowRight?.firstText"
                    [ngStyle]="item.thirdRowRight.firstText.cssStyle | styleFilter">{{item.thirdRowRight.firstText.label}}</span>
                </div>
              </div>
              <!-- <div class="normalRow"
                [ngClass]="{'normalRow': item.thirdRowLeft&&!item.thirdRowRight,'singleRow':item.thirdRowLeft&&item.thirdRowRight}"
                *ngIf="item.thirdRowLeft||item.thirdRowRight">
                <div class="firstRowLeft" *ngIf="item.thirdRowLeft">
                  <span *ngIf="item.thirdRowLeft&&item.thirdRowLeft?.firstText"
                    [ngStyle]="item.thirdRowLeft.firstText.cssStyle | styleFilter">{{item.thirdRowLeft.firstText.label}}</span>
                  <span *ngIf="item.thirdRowLeft&&item.thirdRowLeft?.secondText"
                    [ngStyle]="item.thirdRowLeft.secondText.cssStyle | styleFilter">{{item.thirdRowLeft.secondText.label}}</span>
                </div>
                <div class="firstRowRight" *ngIf="item.thirdRowRight">
                  <span *ngIf="item.thirdRowRight&&item.thirdRowRight?.firstText"
                    [ngStyle]="item.thirdRowRight.firstText.cssStyle | styleFilter">{{item.thirdRowRight.firstText.label}}</span>
                </div>
              </div> -->
              <div class="normalRow" *ngIf="item.remark&&item.remark?.firstText?.label"
                [ngStyle]="item.remark?.box?.cssStyle | styleFilter">
                <span
                  [ngStyle]="item.remark?.firstText?.cssStyle | styleFilter">{{item.remark?.firstText?.label}}</span>
              </div>

              <!-- 服务费  -->
              <div class="normalRow" *ngIf="item.thirdRowLeft2||item.thirdRowRight2">
                <div class="firstRowLeft" *ngIf="item.thirdRowLeft2">
                  <span *ngIf="item.thirdRowLeft2&&item.thirdRowLeft2?.firstText"
                    [ngStyle]="item.thirdRowLeft2.firstText.cssStyle | styleFilter">{{item.thirdRowLeft2.firstText.label}}</span>
                  <span *ngIf="item.thirdRowLeft2&&item.thirdRowLeft2?.secondText"
                    [ngStyle]="item.thirdRowLeft2.secondText.cssStyle | styleFilter">{{item.thirdRowLeft2.secondText.label}}</span>
                </div>
                <div class="firstRowRight" *ngIf="item.thirdRowRight2">
                  <span *ngIf="item.thirdRowRight&&item.thirdRowRight2?.firstText"
                    [ngStyle]="item.thirdRowRight2.firstText.cssStyle | styleFilter">{{item.thirdRowRight2.firstText.label}}</span>
                </div>
              </div>
              <div class="normalRow" *ngIf="item.thirdRowLeft3||item.thirdRowRight3">
                <div class="firstRowLeft" *ngIf="item.thirdRowLeft3">
                  <span *ngIf="item.thirdRowLeft3&&item.thirdRowLeft3?.firstText"
                    [ngStyle]="item.thirdRowLeft3.firstText.cssStyle | styleFilter">{{item.thirdRowLeft3.firstText.label}}</span>
                  <span *ngIf="item.thirdRowLeft3&&item.thirdRowLeft3?.secondText"
                    [ngStyle]="item.thirdRowLeft3.secondText.cssStyle | styleFilter">{{item.thirdRowLeft3.secondText.label}}</span>
                </div>
                <div class="firstRowRight" *ngIf="item.thirdRowRight3">
                  <span *ngIf="item.thirdRowRight&&item.thirdRowRight3?.firstText"
                    [ngStyle]="item.thirdRowRight3.firstText.cssStyle | styleFilter">{{item.thirdRowRight3.firstText.label}}</span>
                </div>
              </div>
              <ng-container *ngIf="item.contentModel">
                <div class="finishBox">
                  <ng-container *ngFor="let subItem of item.contentModel,let j = index;">
                    <ng-container *ngIf="j!==(item.contentModel.length-1)">
                      <span *ngIf="subItem&&subItem?.label" [ngStyle]="subItem.cssStyle | styleFilter">
                        {{subItem.label}}{{subItem.text}}</span>
                    </ng-container>
                    <ng-container *ngIf="j===(item.contentModel.length-1)">
                      <div class="contentModelRow"><span *ngIf="subItem&&subItem?.label"
                          [ngStyle]="subItem.cssStyle | styleFilter">
                          {{subItem.label}}{{subItem.text}}</span>
                        <span *ngIf="item.status&&item.status?.firstText"
                          [ngStyle]="item.status.firstText.cssStyle | styleFilter">{{item.status.firstText.label}}</span>
                      </div>
                    </ng-container>
                  </ng-container>
                </div>
              </ng-container>
              <ng-container *ngIf="!item.contentModel&&item.dateTime||!item.contentModel&&item.status">
                <div class="statusRow">
                  <div class="firstRowLeft">
                    <span *ngIf="item.dateTime&&item.dateTime?.firstText"
                      [ngStyle]="item.dateTime.firstText.cssStyle | styleFilter">{{item.dateTime.firstText.label}}</span>
                  </div>
                  <div class="firstRowRight">
                    <span *ngIf="item.status&&item.status?.firstText"
                      [ngStyle]="item.status.firstText.cssStyle | styleFilter">{{item.status.firstText.label}}</span>
                    <span *ngIf="item.status&&item.status?.linkSpan" [ngStyle]="item.status.cssStyle | styleFilter"
                      appDebounceClick (debounceClick)="go(item.status.linkSpan)">{{item.status.linkSpan.label}}</span>
                  </div>
                </div>
              </ng-container>
            </div>
          </div>
        </div>
        <div [ngClass]="{'buttonBox': !item.fourthRowLeft,'buttonBoxBetween':item.fourthRowLeft}"
          *ngIf="item.fourthRowLeft">
          <div *ngIf="item.fourthRowLeft" [ngStyle]="item.fourthRowLeft.cssStyle | styleFilter">
            {{item.fourthRowLeft.text}}
          </div>
          <div class="buttons">
            <ng-container *ngFor="let btnItem of item.buttons">
              <span class="spanBtn" appDebounceClick (debounceClick)="normalBtnClick(btnItem,dataIndex)">{{btnItem.label}}</span>
            </ng-container>
          </div>
        </div>
        <div class="lineStyle"  *ngIf="!item.hiddenLine"></div>
      </div>
    </div>

  </ng-container>


  <div class="noData" *ngIf="(tagData.data.data.length === 0)||( !tagData.data.data)">
    <ng-container *ngIf="tagData?.hint; else noDataElseTemplate">
      <span class="noData-span">{{tagData?.hint}}</span>
    </ng-container>
    <ng-template #noDataElseTemplate>
      <span class="noData-span">暂无数据</span>
    </ng-template>
    </div>
  <ion-infinite-scroll *ngIf="tagData.data.submit" threshold="100px" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="正在加载更多数据...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</section>